<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <style>
    .menus{
        width: 200px;
        height: 800px;
        border: 1px solid red;
    }

    .menus .header{
        background-color: gold;
        padding: 10px 5px;

        /*鼠标变成小手*/
        cursor: pointer;
    }
    .menus .content a{
        display: block;
        padding: 5px 5px;
        border-bottom: 1px dotted;
    }
    .hide{
        display: none;
    }


    </style>
</head>
<body>

<div class="menus">
    <div class="item">
        <div class="header" onclick="clickMe(this);">上海</div>
        <div class="content hide">
            <a>浦东新区</a>
            <a>这个新区</a>
            <a>那个新区</a>
        </div>
    </div>

    <div class="item">
        <div class="header" onclick="clickMe(this);">北京1</div>
        <div class="content hide">
            <a>顺义区</a>
            <a>海淀区</a>
            <a>朝阳区</a>
        </div>
    </div>

    <div class="item">
        <div class="header" onclick="clickMe(this);">北京2</div>
        <div class="content hide">
            <a>顺义区</a>
            <a>海淀区</a>
            <a>朝阳区</a>
        </div>
    </div>

    <div class="item">
        <div class="header" onclick="clickMe(this);">北京3</div>
        <div class="content hide">
            <a>顺义区</a>
            <a>海淀区</a>
            <a>朝阳区</a>
        </div>
    </div>

</div>


<script src="static/jquery-3.6.0.min.js"></script>
<script>
    function clickMe(self){
        $(self).next().removeClass("hide");
        //.siblings()是找兄弟
        $(self).parent().siblings().find(".content").addClass("hide");



    }
</script>

</body>
</html>